<template>
  <el-dialog title="商品详情" :visible="visible" @close="hide">
    <el-form :model="form" ref="form">
      <el-form-item
        label="商品名称"
        :label-width="formLabelWidth"
        prop="name"
        :rules="[{ required: true, message: '请输入商品名称' }]"
      >
        <el-input
          v-model="form.name"
          autocomplete="on"
          placeholder="请输入商品名称"
          :maxlength="30"
          :clearable="true"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商品主图"
        :label-width="formLabelWidth"
        prop="logo"
        :rules="[{ required: true, message: '请上传图片' }]"
      >
        <el-upload
          :action="
            `http://${
              process.env.NODE_ENV === 'development'
                ? 'localhost:9009'
                : 'qiucc.com'
            }/rentmall/img/upload`
          "
          name="files"
          list-type="picture-card"
          :file-list="fileList"
          :on-success="handleUploadSuccess"
          :on-change="handleUploadChange"
          :auto-upload="true"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
              v-show="file.url"
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <el-tooltip content="主图" placement="top">
                  <i class="el-icon-star-on" style="color: #E6A23C"></i>
                </el-tooltip>
              </span>
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(file, fileList)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="商品描述"
        :label-width="formLabelWidth"
        prop="description"
        :rules="[{ required: true, message: '请输入商品描述' }]"
      >
        <el-input
          v-model="form.description"
          autocomplete="on"
          type="textarea"
          :rows="3"
          placeholder="请输入商品描述"
          :clearable="true"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="租金/天"
        :label-width="formLabelWidth"
        prop="price"
        :rules="[{ required: true, message: '请输入租金' }]"
      >
        <el-input-number
          :min="0"
          :max="1000000"
          @change="onPriceChange"
          v-model="form.price"
        />
        <span>元</span>
      </el-form-item>
      <el-form-item
        label="押金"
        :label-width="formLabelWidth"
        prop="deposit"
        :rules="[{ required: true, message: '请输入租金' }]"
      >
        <el-input-number :min="0" :max="1000000" v-model="form.deposit" />
        <span>元</span>
      </el-form-item>
      <el-form-item
        label="配送费/回收费"
        :label-width="formLabelWidth"
        prop="shippingFee"
      >
        <el-input-number
          :min="0"
          :max="1000000"
          v-model="form.shippingFee"
          placeholder="请输入配送费"
        />
        <span>元</span>
      </el-form-item>
      <el-form-item
        label="配送范围"
        :label-width="formLabelWidth"
        prop="shippingScope"
      >
        <el-input-number
          :min="0"
          :max="1000"
          v-model="form.shippingScope"
          placeholder="请输入配送费"
        />
        <span>Km</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="update(0)" v-if="form.id">存草稿</el-button>
      <el-button @click="publish(0)" v-else>存草稿</el-button>
      <el-button type="primary" @click="update(1)" v-if="form.id"
        >发布</el-button
      >
      <el-button type="primary" @click="publish(1)" v-else>发布</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </el-dialog>
</template>

<script>
import Vue from 'vue'
import numeral from 'numeral'

export default {
  name: 'editGoods',
  props: {},
  data () {
    return {
      process: process,
      visible: false,
      dialogImageUrl: '',
      dialogVisible: false,
      formLabelWidth: '120px',
      fileList: [],
      form: {
        price: 0,
        deposit: 0,
        name: '',
        description: '',
        shippingFee: 0,
        shippingScope: 0,
        logo: [],
        rentedNumber: 0,
        goodsNumber: 0
      }
    }
  },
  methods: {
    show (item) {
      if (item && item.id) {
        const picList = item.picUrls.split(',').filter(url => url)
        this.fileList = picList.map((url, index) => {
          return {
            url
          }
        })
        this.form = {
          id: item.id,
          price: item.price,
          deposit: item.deposit,
          name: item.name,
          description: item.description,
          shippingFee: item.shippingFee,
          shippingScope: item.shippingScope,
          rentedNumber: item.rentedNumber,
          goodsNumber: item.goodsNumber,
          logo: picList
        }
      }
      this.visible = true
      this.$refs.form && this.$refs.form.clearValidate()
    },
    hide () {
      this.$refs.form.resetFields()
      this.fileList = []
      this.form = {
        price: 0,
        deposit: 0,
        name: '',
        description: '',
        shippingFee: 0,
        shippingScope: 0,
        goodsNumber: 0,
        rentedNumber: 0,
        logo: []
      }
      this.visible = false
    },
    handleRemove (file, fileList) {
      var index = fileList.indexOf(file)
      if (index >= 0) {
        this.fileList.splice(index, 1)
        this.$message.success('删除成功')
      }
    },
    handlePreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleUploadSuccess (res) {
      console.log('上传成功', res)
      if (res.code !== 200) return
      this.form.logo = this.form.logo.concat(
        `http://${
          process.env.NODE_ENV === 'development'
            ? 'localhost:9009'
            : 'qiucc.com'
        }${res.body.name}`
      )
    },
    handleUploadChange (res) {
      console.log('上传文件变动', res)
    },
    publish (type) {
      debugger
      var url = `http://${
        process.env.NODE_ENV === 'development' ? 'localhost:9009' : 'qiucc.com'
      }/rentmall/goods/create`
      const form = this.form
      this.$refs.form.validate(validate => {
        if (validate) {
          const loading = this.$loading()
          this.$http
            .post(url, {
              pagination: {},
              query: {},
              form: {
                shopId: Vue.prototype.shopInfo.id,
                price: numeral(form.price)
                  .multiply(100)
                  .value(),
                deposit: numeral(form.deposit)
                  .multiply(100)
                  .value(),
                shippingFee: numeral(form.shippingFee)
                  .multiply(100)
                  .value(),
                shippingScope: form.shippingScope,
                picUrls: form.logo.join(','),
                name: form.name,
                status: type,
                description: form.description,
                rentedNumber: this.form.rentedNumber

              }
            })
            .then(() => {
              this.$message.success('发布成功')
              this.hide()
              this.$emit('close')
            })
            .catch()
            .finally(() => {
              setTimeout(() => loading.close(), 500)
            })
        }
      })
    },
    update (type) {
      this.$refs.form.validate(validate => {
        if (validate) {
          const loading = this.$loading()
          this.$http
            .post(
              `http://${
                process.env.NODE_ENV === 'development'
                  ? 'localhost:9009'
                  : 'qiucc.com'
              }/rentmall/goods/update`,
              {
                query: {},
                pagination: {},
                form: {
                  id: this.form.id,
                  shopId: Vue.prototype.shopInfo.id,
                  price: numeral(this.form.price)
                    .multiply(100)
                    .value(),
                  deposit: numeral(this.form.deposit)
                    .multiply(100)
                    .value(),
                  shippingFee: numeral(this.form.shippingFee)
                    .multiply(100)
                    .value(),
                  shippingScope: this.form.shippingScope,
                  picUrls: this.form.logo.join(','),
                  name: this.form.name,
                  description: this.form.description,
                  goodsNumber: this.form.goodsNumber,
                  rentedNumber: this.form.rentedNumber
                }
              }
            )
            .then(() => {
              this.$message.success('修改成功')
              this.hide()
              this.$emit('close')
            })
            .catch()
            .finally(() => {
              setTimeout(() => loading.close(), 1000)
            })
        }
      })
    },
    onPriceChange (e) {
      console.log('价格变动: ', e)
    }
  }
}
</script>

<style>
#edit-goods {
  /* .{} */
}
</style>
